<template>
  <q-card class="my-card" flat>
    <q-card-section>
      <div
        class="text-h6 cursor-pointer"
        @click="
          $router.push(`/detail/${sourceTaskId}?userid=${account.userid}`)
        "
        style="word-break: break-all"
      >
        [{{ taskTitle }}]
        {{ taskDesc }}
      </div>
      <div class="text-subtitle1 q-gutter-x-md flex items-center">
        <span class="text-orange text-h6">
          <template v-if="/^[\d\.]+$/.test(budgetAmount)"> ¥ </template>
          {{ budgetAmount }}
        </span>

        <!--
        <span v-if="backBeanLeftTime">
          返豆:{{ demandLeftTime(backBeanLeftTime) }}
          <template v-if="consume">
            ({{ consume.consume * beanBackRatio }})
          </template>
        </span>
        <span v-if="consume">
          <span class="text-red">{{ consume.consume }}</span>
          商机豆
        </span>
        <span
          class="text-primary cursor-pointer"
          @click="getConsumeDetail(item)"
          v-else
        >
          查询商机豆
        </span>
        <q-space />
        <q-btn
          color="primary"
          flat
          label="查询附件"
          dense
          @click="getDemandDetailInfo(item)"
        /> -->
      </div>
    </q-card-section>
    <q-separator />
    <q-card-section class="flex items-center q-gutter-x-md">
      <q-badge
        :color="$store.state.common.colors[demandSource]"
        :label="demandSourceName"
        outline
      />
      <span class="text-grey-6"> {{ data.demandLeftMinute }}后截止报名 </span>
      <span>
        <!-- {{ getDateDiff(findTime) }} -->
      </span>
      <q-space />
      <q-btn
        color="primary"
        unelevated
        label="抢需求"
        :loading="data.loading"
        @click="seizeDemand(sourceTaskId)"
      />
    </q-card-section>
  </q-card>
</template>

<script>
import { useQuasar } from "quasar";
import { addMarkBook, fetchDemandDetailInfo } from "src/assets/fetch";
import {
  diffTime,
  getBiddingConsume,
  getBiddingScheme,
} from "src/assets/utils";
import { computed, defineComponent, reactive } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "ComponentsItemsDemandsItemVue",
  props: {
    sourceTaskId: String,
    taskTitle: String,
    taskDesc: String,
    budgetAmount: String,
    demandSource: Number,
    demandSourceName: String,
    demandLeftMinute: Number,
    findTime: Number,
    account: Object,
  },
  setup(props) {
    const $store = useStore();
    const $q = useQuasar();
    const data = reactive({
      loading: false,
      demandLeftMinute: computed(() => {
        const diff = diffTime(props.demandLeftMinute);
        let str = "";
        const units = {
          days: "天",
          hours: "小时",
        };
        for (const key in units) {
          if (diff[key]) {
            str += diff[key] + units[key];
          }
        }
        return str;
      }),
    });

    return {
      data,
      seizeDemand(demandId) {
        data.loading = true;
        new Promise(async (resolve, reject) => {
          // 获取需求详情
          const detail = await fetchDemandDetailInfo(
            { demandId },
            props.account.cookie
          );
          if (!detail || !detail.data.baseView) {
            return resolve(false);
          }

          // 获取投标方案
          const body = await getBiddingScheme(
            detail.data.baseView.baseCategoryId,
            true
          ).catch(reject);
          if (!body) {
            return reject();
          }

          // 获取投标消耗
          const consumeResult = await getBiddingConsume(demandId).catch(reject);
          if (!consumeResult) {
            return reject();
          }

          /**
           * 消耗的商业产品
           * 1 随心包
           * 2 投标易3.0
           * 3 商机豆
           * 4 免费的兼职投标次数
           * 5 兼职易
           */
          body.bidType = consumeResult.bidType;
          body.demandId = demandId;
          body.consume = consume;

          const cookie = $store.getters["common/currentCookie"];
          const result = await addMarkBook(body, cookie).catch(reject);
          if (!result) {
            return reject();
          }
          console.log(result);
          resolve(result);
        }).finally(() => (data.loading = false));
      },
    };
  },
});
</script>
